<template>
<cus-skeleton :loading="loading">
  <div class="question-content">
    <div class="section">
      <div class="label">题干</div>
      <div class="title">这里填写题目描述</div>
      <cus-editor v-model="formGroup.title" min-height="80px" placeholder="请输入题干"></cus-editor>
      <div class="tip" v-if="valid && !formGroup.title">请输入题目描述！</div>
    </div>
    <UploadComponent v-model:voice-path="formGroup.voicePath" v-model:video-path="formGroup.videoPath" :base-type="baseType" />
    <component :is="typeIs" :base-type="baseType" :valid="valid" ref="typeRef" />
    
    <div class="section" v-if="baseType !== 11">
      <div class="label">解析</div>
      <div class="title">这里填写该问题对应的答案解释</div>
      <cus-editor min-height="80px" v-model="formGroup.analysis" />
    </div>
  </div>
</cus-skeleton>
</template>

<script lang="ts">
import { ref, computed, reactive } from "vue";
import OptionTypeComponent from './types/option.vue';
import JudgmentTypeComponent from './types/judgment.vue';
import OtherTypeComponent from './types/other.vue';
import MatchingTypeComponent from './types/matching.vue';
import MultipleTypeComponent from './types/multiple.vue';
import UploadComponent from './components/upload.vue';

type TQuestionType = 'options' | 'judgment' | 'matching' | 'multiple' | 'other';

export default {
  props: ["loading"],
  components: { 
    options: OptionTypeComponent, 
    other: OtherTypeComponent, 
    judgment: JudgmentTypeComponent, 
    matching: MatchingTypeComponent,
    multiple: MultipleTypeComponent,
    UploadComponent 
  },
  setup() {
    let formGroup = reactive({
      title: null,
      analysis: null,
      voicePath: null,
      videoPath: null
    });

    let valid = ref(false);
    let typeRef = ref<null | any>(null);
    const validator = () => {
      valid.value = true;         // 开启校验

      if (!formGroup.title) { return false; }     // 无题干，校验不通过

      let result = typeRef.value.validator();

      if (!result) { return false; }
      
      let data: any = {
        ...formGroup,
        baseType: baseType.value,
        ...result
      };
      return data;
    };

    // 1：单选题/选择题 2：多选题 3：填空题 4：判断题
    let baseType = ref(3);
    let typeIs = computed<TQuestionType>(() => baseType.value < 4 ? 'options' : baseType.value === 4 ? 'judgment' : baseType.value === 7 ? 'matching' : baseType.value === 11 ? 'multiple' : 'other')
    
    const questionTypeChange = (question) => {
      baseType.value = question.toolQuestionType;
      // if (baseType.value === 4) {
      //   answer.value = "正确";
      // }
      // if (baseType.value === 1 || baseType.value === 3) {
      //   options.value = Array.from(new Array(4), (i, idx) => ({
      //     no: idx + 1,
      //     content: null,
      //     checked: false,
      //   }));
      // }
    };

    return { formGroup, valid, validator, questionTypeChange, baseType, typeRef, typeIs };
  },
};
</script>

<style lang="scss" scoped>
.question-content {
  :deep(.section) {
    padding: 0 32px 0 60px;
    margin-bottom: 40px;
    position: relative;
    .cus__editor::after {
      display: block;
      visibility: hidden;
      clear: both;
      content: '';
      height: 0;
    }
    &:last-child {
      margin-bottom: 30px;
    }   
    .tip {
      color: #f56c6c;
      font-size: 12px;
      line-height: 15px;
      position: absolute;
      bottom: 0;
      left: 60px;
      margin-bottom: -20px;
    }
    .label {
      padding: 0 14px;
      color: #fff;
      font-size: 12px;
      line-height: 26px;
      background: #faad14;
      border-radius: 6px;
      position: absolute;
      top: 0;
      left: 0;
    }
    .title {
      margin-bottom: 15px;
      color: #333;
      font-size: 12px;
      line-height: 26px;
      text-indent: 4px;
    }
  }
}
</style>
